:root {
    --mainColor1: oklch(0.7071 0.0487 182.43); /* #7faba3 */
    --mainColor2: oklch(0.7071 0.15 182.43);
    --mainColor3: oklch(0.83799 0.06878 185.567);
    --secondaryColor1: oklch(0.5994 0.0714 235.53); /* #5487a5 */
    --secondaryColor2: oklch(0.8 0.0714 235.53);
    --secondaryColor3: oklch(0.3 0.0714 235.53);
    --accentColor: white;
    --blur1: oklch(0.7071 0.15 182.43 / 0.7);
    --blur2: oklch(0.5994 0.0714 235.53 / 0.6);
    --blur3: rgba(255, 255, 255, 0.8);
}

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900');

html {
  scroll-behavior: smooth;
}

body::before {
    display: block;
    content: '';
    height: 72px;
}

body {
    font-family: Geologica, Arial, Helvetica, sans-serif;
}


/* CSS code for the navigation bar */
.navbar {
    background-color: var(--blur1);
    backdrop-filter: blur(7px);
    border-bottom: 2px solid var(--secondaryColor1);
}

.navbar-nav {
    margin: 0 auto;
}

nav .nav-item, nav .nav-link {
    border-radius: 20px;
}

.navbar .nav-link {
    color: var(--secondaryColor3);
    background-color: var(--accentColor);
}

.navbar li:first-child .nav-link {
    color: var(--accentColor);
    background-color: var(--secondaryColor3);
}

.navbar .nav-link:hover {
    color: var(--accentColor);
    background-color: var(--secondaryColor3);
}

/* Media queries for the navigation bar */
@media only screen and (max-width: 576px) {
    .navbar {
        padding: 1.5rem 0 !important;
        width: 100vw;
    }

    .navbar-nav {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }

    nav .nav-link {
        font-size: 0.6rem;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}


/* CSS code for the hero image */
.hero {
    border-bottom: 1px solid var(--mainColor2);
}

.hero img {
    width: 100%;
}


/* CSS code for the grid */
#carouselExampleIndicators  {
    background-color: var(--accentColor);
    background: radial-gradient(circle, transparent 20%, var(--accentColor) 20%, var(--accentColor) 80%, transparent 80%, transparent),
    radial-gradient(circle, transparent 20%, var(--accentColor) 20%, var(--accentColor) 80%, transparent 80%, transparent) 25px 25px,
    linear-gradient(var(--mainColor1) 2px, transparent 2px) 0 -1px,
    linear-gradient(90deg, var(--mainColor1) 2px, var(--accentColor) 2px) -1px 0;
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}

.carousel-indicators button{
    background-color: var(--blur2) !important;
    backdrop-filter: blur(7px);
    border: 2px solid var(--secondaryColor1) !important;
    margin: 0 0.375rem !important;
    border-radius: 3px;
}

section .row {
    margin: 0;
}

section .col div {
    background-color: var(--blur2);
    backdrop-filter: blur(7px);
    padding: 1em;
    border-radius: 20px;
    width: 300px;
    height: 250px;
}

#logo-1, #logo-10 {
    width: 120px;
}

#logo-1, #logo-14 {
    margin-top: 0.875rem;
}

#logo-2, #logo-6  {
    height: 70px;
}

#logo-3 {
    height: 40px;
}

#logo-3, #logo-12 {
    margin-top: 1rem;
}

#logo-4, svg, #logo-16 {
    height: 60px;
}

#logo-4, #logo-16 {
    margin-top: 2.5rem;
}

#logo-5 {
    width: 250px;
}

#logo-7 {
    height: 110px;
}

#logo-8 {
    height: 75px;
}

#logo-7, #logo-8 {
    margin-top: 0.6rem;
}

#logo-9, #logo-12, #logo-14 {
    width: 200px;
}

#logo-10 {
    margin-top: 1.25rem;
}

#logo-11 {
    height: 90px;
}

#logo-13 {
    height: 120px;
    margin-top: 0.5rem;
}

svg {
    fill: var(--secondaryColor3);
    margin-top: 3rem;
}

#logo-17 {
    height: 150px;
}

#logo-18 {
    width: 170px;
}

.btn {
    background-color: var(--secondaryColor3);
    border-color: var(--secondaryColor3);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn:hover {
    background-color: var(--blur3);
    backdrop-filter: blur(7px);
    border-color: var(--secondaryColor3);
    color: var(--secondaryColor3);
}

.btn:first-child:active, .btn-check:checked+.btn, .btn.active, .btn.show, :not(.btn-check)+.btn:active {
    background-color: var(--secondaryColor3);
    border-color: var(--secondaryColor3);
}

.btn:focus-visible {
    color: var(--secondaryColor3);
    background-color: var(--blur3);
    backdrop-filter: blur(7px);
    border-color: var(--secondaryColor3);
    box-shadow: 0 0 0 0;
}

.modal-content {
    background-color: var(--blur3);
    backdrop-filter: blur(7px);
    border-color: var(--mainColor2);
    border-width: 2px;
    width: 90%;
}

.modal-header, .modal-body, .modal-footer {
    border-color: var(--mainColor2);
    border-width: 1px;
    color: var(--secondaryColor3)
}

.btn-close:focus {
    box-shadow: 0 0 0 0;
}

.modal-body {
    font-weight: 200;
}

.modal-body p:first-child {
    margin-bottom: 0.5rem;
}

#inside {
    color: var(--secondaryColor3);
    text-decoration: none;
    border-bottom: 1px solid var(--secondaryColor2);
}

#inside:hover {
    color: var(--secondaryColor1);
}

/* Media queries for the grid */
@media only screen and (max-width: 992px) {
    #logo-1, #logo-2, #logo-3, #logo-4, #logo-5, #logo-6, #logo-7, #logo-8, #logo-9, #logo-10, #logo-11, #logo-12, #logo-13,
    #logo-14, svg, #logo-16, #logo-17, #logo-18 {
        transform: scale(0.8);
        transform-origin: center;
    }

    .column-3 {
        display: none !important;
    }
}

@media only screen and (max-width: 940px) {
    section .col {
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 768px) {
    section .col div {
        width: 200px;
        height: 240px;
    }

    #logo-1, #logo-2, #logo-3, #logo-4, #logo-5, #logo-6, #logo-7, #logo-8, #logo-9, #logo-10, #logo-11, #logo-12, #logo-13,
    #logo-14, svg, #logo-16, #logo-17, #logo-18 {
        transform: scale(0.5);
        transform-origin: center;
    }    
}

@media only screen and (max-width: 576px) {
    section .col div {
        min-width: 250px;
        height: 220px;
    }

    #logo-1, #logo-2, #logo-3, #logo-4, #logo-5, #logo-6, #logo-7, #logo-8, #logo-9, #logo-10, #logo-11, #logo-12, #logo-13,
    #logo-14, svg, #logo-16, #logo-17, #logo-18 {
        transform: scale(0.6);
        transform-origin: center;
    }

    .row-3 {
        display: none !important;
    }

    .modal-content {
        width: 100% !important;
    }

    .modal-header {
        font-size: 1rem;
    }

    .modal-body {
        font-size: 0.875rem;
    }

    .modal-footer button {
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 510px) {
    .modal-header {
        font-size: 0.875rem;
    }

    .modal-body {
        font-size: 0.75rem;
    }

    .modal-footer button {
        font-size: 0.625rem;
    }
}


/* CSS code for the footer */
footer {
    max-width: 100vw;
    margin: 0 !important;
    background-color: var(--mainColor3);
    font-size: 0.875rem;
    border-top: 1px solid var(--mainColor2);
}

footer .nav-item, footer h5 {
    color: var(--secondaryColor3);
}

footer h5 {
    border-bottom: 0 solid var(--secondaryColor3);
    transition: border-bottom 100ms;
}

footer h5:hover {
    border-bottom: 1px solid var(--secondaryColor3);
}

#map {
    color: var(--secondaryColor3);
    border-bottom: 0 solid var(--blur1);
    border-radius: 0;
    transition: border-bottom 100ms;
}

#map:hover {
    border-bottom: 1px solid var(--blur1);
}

i {
    color: var(--secondaryColor3) !important;
    margin: 0 !important;
}

i:hover {
    color: var(--blur1) !important;
}

/* Media queries for the footer */
@media only screen and (max-width: 940px) {
    footer {
        font-size: 0.625rem;
    }

    footer h5 .nav-link {
        font-size: 0.875rem;
    }

    footer .col {
        max-width: 200px;
    }
}

@media only screen and (max-width: 615px) {
    footer .col {
        max-width: 150px;
    }

    footer .nav-link {
        padding-left: 0 !important;
    }
}

@media only screen and (max-width: 576px) {
    footer h5 .nav-link {
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 464px) {
    footer {
        font-size: 0.5rem;
    }

    footer h5 .nav-link {
        font-size: 0.625rem;
    }

    footer .col {
        max-width: 120px;
    }
}